<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form Builder</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="App">

<div ng-controller="FormBuilderCtrl as vm">
  <h3>Table</h3>
  
<!--   <table>
    <tbody>
      <tr ng-repeat="row in vm.repeatCount() track by $index">
        <td ng-repeat='cell in vm.getDataByIndex($index)'>data</td>
      </tr>
    </tbody>
  </table>   -->
      
  <h3>Table2</h3>
  <table>
    <tbody>
      <tr ng-repeat="grid in vm.repeatCount() track by $index">
        <form-cell ng-repeat='cell in vm.getDataByIndex($index)'>data</form-cell>
      </tr>
    </tbody>
  </table>  


</div>


<script src='js/jquery-2.2.4.min.js'></script>
<script src='js/angular.min.js'></script>
<script>
  

var App = angular.module('App', []);


App.controller('FormBuilderCtrl', function($scope) {
  var vm = this;

  vm.data = {
      "Grids": [
          {
              "Cells": [
                  {
                      "AttributeId": 2,
                      "title": "1-1"
                  },
                  {
                      "AttributeId": 2,
                      "title": "2-1"
                  }
              ]
          },
          {
              "Cells": [
                  {
                      "AttributeId": 2,
                      "title": "1-1"
                  },
                  {
                      "AttributeId": 2,
                      "title": "2-1"
                  }
              ]
          }
      ]
  };

  vm.getData = function(){
    return vm.data.Grids;
  };

  vm.repeatCount = function() {
    return new Array(2);
  };

  vm.getDataByIndex = function(index) {
      
      //if(index){
        console.log(index)
        return vm.data.Grids[index].Cells;
      //}
      
  };

});

App.directive('formCell', function(){
  return {
    restrict: 'EA',
    replace: true,
    template: '<td>~~</td>',
    link: function(scope, elem, attrs) {
      console.log('~~');
    }
  }
});

</script>

</body>
</html>
